<!DOCTYPE html>
<#import "/common/common.html" as common>
<html>
<head>
	<@common.head title="微信wifi管理系统" keywords="" description=""/>
	<!-- 
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/area.js"></script>
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/location.js"></script>
	 -->
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/category.js"></script>
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/category_data.js"></script>
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/select2.js"></script>
	<script type="text/javascript" src="${basePath}/res/js/plugins/bootstrap-select/select2/select2_locale_zh-CN.js"></script>
	<link href="${basePath}/res/css/plugins/bootstrap-select/select2/common.css" rel="stylesheet"/>
	<link href="${basePath}/res/css/plugins/bootstrap-select/select2/select2.css" rel="stylesheet"/>
	 
	<script src="http://map.qq.com/api/js?v=2.exp" charset="utf-8"></script>
</head>
<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">
    	<div class="row">
            <div class="col-sm-12" id="userListDiv">
                <div class="ibox float-e-margins">
                	 <div class="ibox-title">
                        <a href="${basePath}/wxstore" class="icon_goback">返回上一层</a>
                        <a href="${basePath}/wxstore">门店管理</a> / 创建新门店
                    </div>
                    <div class="ibox-content">
                     <form id="form" class="form-horizontal">
                     	<input type="hidden" id="province" />
                     	<input type="hidden" id="city" />
                     	<input type="hidden" id="district" />
                     	<input type="hidden" id="longitude" />
                     	<input type="hidden" id="latitude" />
                     	<div class="form-group">
                                <label class="col-sm-2 control-label">公众号</label>
                                <div class="col-sm-3">
                               		<#if wxusers??>
                               		<select id="wxuser_id" name="wxuser_id" class="form-control input-s-sm inline">
										<#list wxusers as wxuser>
											<option value="${wxuser.id}">${wxuser.name}</option>
										</#list>
									</select>
									</#if>
                                </div>
                         </div>
                         <!-- 
                         <div class="form-group">
                                <label class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-10" id="city_5">
                                	<div class="row">
                                		<div style="width:400px" class="col-md-2">
                                			<select id="cur_province" style="width:120px;text-align:center">
										    </select>
										    <select id="cur_city" style="width:120px; text-align:center">
										    </select>
										    <select id="cur_town" style="width:120px;text-align:center">
										    </select>
                                		</div>
                                		<div class="col-md-5">
                                			<input type="text" class="form-control requiredIcon" id="address" name="address" placeholder="输入详细地址，请勿重复填写省市区信息">
                                		</div>
                                		<div class="col-md-2">
                                			<button id="btn_search" class="btn btn-primary">搜索标注</button>
                                		</div>
                                	</div>
		                        </div>
                            </div>
                             -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">定位</label>
                                <div class="col-sm-8">
                                   <iframe id="locationPage" width="100%" height="700px" frameborder=0 
									    src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=QAQBZ-UQARG-D4CQ5-IXZRS-IFWUQ-N5BG4&referer=myapp">
									</iframe>
									<script>
									    window.addEventListener('message', function(event) {
									        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
									        var loc = event.data;
									        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
									        	console.log('location', loc);
									        	var poiaddress = loc.poiaddress;
									        	var reg = /(.*?省)(.*?市)(.*?[区|县|市])(.*)/;
									        	var result = poiaddress.match(reg);
									        	// 市级名称
									        	var cityname = loc.cityname;
									        	if(result == null) {
									        		alert("请选择具体地址！");
									        		return;
									        	}
									        	
									        	var provincename = result[1];// 省级名称
									        	var districtname = result[3];// 区县名称
									        	var addressname = result[4];// 具体地址
									        	var latitude = loc.latlng.lat; // 纬度
									        	var longitude = loc.latlng.lng; // 经度
									        	
									        	$("#business_name").val(loc.poiname);
									        	$("#address").val(addressname);
									        	$("#province").val(provincename);
									        	$("#city").val(cityname);
									        	$("#district").val(districtname);
									        	$("#longitude").val(longitude);
									        	$("#latitude").val(latitude);
									        	
									        }                                
									    }, false); 
									</script>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">门店名</label>
                                <div class="col-sm-8">
                                	<input type="text" id="business_name" disabled name="business_name" class="form-control requiredIcon" placeholder="选择定位中地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">门店地址</label>
                                <div class="col-sm-8">
                                	<input type="text" id="address" disabled name="address" class="form-control requiredIcon" placeholder="选择定位中地址">
                                </div>
                            </div>
                            <!-- 
                            <div class="form-group">
                                <label class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-8">
                                    <div id="container" style="width:100%; height:600px"></div>
                                </div>
                            </div>
                             -->
                            <div class="form-group">
                                <label class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-8">
                                    <input type="text" id="telephone" name="telephone" class="form-control requiredIcon" placeholder="输入电话">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">类目</label>
                                <div class="col-sm-8">
                                	<div class="row">
                                		<div class="col-sm-2">
	                                     	<select id="category1" class="form-control input-s-sm">
									     	</select>
									     </div>
									     <div class="col-sm-2">
										     <select id="category2" class="form-control input-s-sm">
										     </select>
								     	</div>
								     </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-8 col-sm-offset-4">
                                	<div class="col-sm-2">
	                                    <button class="btn btn-primary" type="submit">保存内容</button>
	                                </div>
                                    <div class="col-sm-2">
	                                    <button class="btn btn-white">取消</button>
	                                </div>
                                </div>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    	$(function(){
    		var validator = $("#form").validate({
    	          ignore: ".ignore",
    	      	  rules: {
    	                address: {
    	                    required: true
    	                },
    	                telephone: {
    	                    required: true
    	                },
    	                business_name: {
    	                	required: true
    	                }
    	            },
    	            messages: {
    	            	address: {
    	                    required: icon + "请输入地址"
    	                },
    	                telephone: {
    	                    required: icon + "请输入电话"
    	                },
    	                business_name: {
    	                    required: icon + "请输入门店名"
    	                }
    	            },
    	            submitHandler: function(form){
    	            	if($("#business_name").val().trim().length == 0) {
    	            		alert("请在定位下方选择具体的地址！");
    	            		return;
    	            	}
    	            	//显示loading提示
    	                var loading = layer.load();
    	            	$.post("${basePath}/wxstore/add", {
    	            		business_name: $("#business_name").val(),
	               	 		wxuser_id: $("#wxuser_id").val(),
	               	 		address: $("#address").val(),
	               	 		province: $("#province").val(),
	               	 		city: $("#city").val(),
	               	 		district: $("#district").val(),
	               	 		longitude: $("#longitude").val(),
	               	 		offset_type: 1,
	               	 		latitude: $("#latitude").val(),
	               	 		telephone: $("#telephone").val(),
	               	 		categories: $("#category1").val() + "," + $("#category2").val()
    	            	},function(resp){
    	            		layer.close(loading);
    	            		if(resp.code == 0) {
	    	            		swal({
	    	                  		title: "操作成功",
	    	                  		type: "success",
	    	                  		showCancelButton: false,
	    	                  		confirmButtonColor: '#18a689',
	    	                  		confirmButtonText: '确定',
	    	                  		closeOnConfirm: true
	    	                  	},
	    	                  	function(){
	    	                  		window.open("${basePath}/wxstore", "_self");
	    	                  	});
    	            		}else if(resp.code == 1){
    	            			swal("操作失败！", resp.data, "error");
    	            		}else {
    	            			swal("操作失败！", "未知错误", "error");
    	            		}
    	            	},"json");
    	            },
    	            showErrors: function(errorMap, errorList) {
    	          		this.defaultShowErrors();
    	            }
    	        });
    	})
    	
    	/*var container = document.getElementById("container");
    	var map = new qq.maps.Map(container, {
            zoom: 10
        }),
        label = new qq.maps.Label({
            map: map,
            offset: new qq.maps.Size(15,-12),
            draggable: false,
            clickable: false
        }),
        btnSearch = document.getElementById("btn_search"),
        curCity = document.getElementById("cur_city"),
        url = $(curCity).val(),
        cityservice = new qq.maps.CityService({
            complete: function (result) {
            	curCity.children[0].innerHTML = result.detail.name;
                map.setCenter(result.detail.latLng);
            }
        });
    	cityservice.searchLocalCity();
    	
    	map.setOptions({
    	    draggableCursor: "crosshair"
    	});

    	$(container).mouseenter(function () {
    	    label.setMap(map);
    	});
    	$(container).mouseleave(function () {
    	    label.setMap(null);
    	});

    	qq.maps.event.addListener(map, "mousemove", function (e) {
    	    var latlng = e.latLng;
    	    label.setPosition(latlng);
    	    label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
    	});
    	
    	qq.maps.event.addDomListener(btnSearch, 'click', function () {
    	    var value = $("#address").val();
    	    var latlngBounds = new qq.maps.LatLngBounds();
    	    url = encodeURI("http://apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + $("#cur_city").find("option:selected").text() + ",0)&page_size=9&page_index=1&key=QAQBZ-UQARG-D4CQ5-IXZRS-IFWUQ-N5BG4&output=jsonp&&callback=?");
    	    $.getJSON(url, function (result) {
    	    	console.log(result);
    	    });
    	});*/
    		
    </script>
</body>

</html>